<!doctype html>
<head>
<meta charset="utf-8">
<title>Gappro - Admin Theme Template for Backend Applications.</title>
<link href='http://fonts.googleapis.com/css?family=Sintony' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/style-responsive.css" rel="stylesheet" media="screen">
<link href="css/font_awesome/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="css/jquery-ui-1.10.2.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/colorpicker/colorpicker.css" media="screen">
<link rel="stylesheet" href="css/datepicker/datepicker.css" media="screen">
<link rel="stylesheet" href="css/clockface/clockface.css" media="screen">
<link rel="stylesheet" href="css/daterangepicker/daterangepicker.css" media="screen">
<link rel="stylesheet" href="css/editable/bootstrap-editable.css" media="screen">
<link rel="stylesheet" href="css/lightbox/bootstrap-lightbox.min.css" media="screen">
<link href="css/sb/sexybuttons.css" rel="stylesheet" media="screen">
<link href="css/joyride/joyride-2.0.3.css" rel="stylesheet" media="screen">
<link href="css/prettify/sons-of-obsidian.css" rel="stylesheet" media="screen">
<link href="css/jqcloud/jqcloud.css" rel="stylesheet" media="screen">
<link href="css/bootstrap_modal/bootstrap-modal.css" rel="stylesheet" media="screen">
<style>
  .sexybutton { margin-bottom: 8px; }
  .words-cloud {height: 150px; }
</style>
<meta name="description" content="admin theme template for any backend applications.">
<meta name="author" content="boostbob.github.com">
<meta name="viewport" content="width=device-width,initial-scale=1.0"></head>

<body>
<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container-fluid">
      <div class="row-fluid">

        <div class="span8">
          <a href="index.html">
            <img class="brand" src="img/logo.png" alt="">
          </a>
          
          <form class="form-search">
            <input type="text" placeholder="keywords" class="input-medium search-query">
            <button type="submit" class="btn">Search</button>

              <div class="btn-group">
                <a class="btn dropdown-toggle btn-warning" data-toggle="dropdown" href="#">
                  <span><i class="icon-bell"></i></span>
                </a>
                <ul class="dropdown-menu" id="messages-box">
                  <li>
                    <img src="img/avatar2.jpg" alt="">
                    <span class="time">6 mintues ago</span><br>
                    <span class="content">Lorem ipsum et consectetur officia veniam... </span>
                  </li>
                  <li>
                    <img src="img/avatar4.jpg" alt="">
                     <span class="time">12 mintues ago</span><br>
                    <span class="content">Lorem ipsum et consectetur officia veniam... </span>
                  </li>
                  <li>
                    <img src="img/avatar6.jpg" alt="">
                  <span class="time">20 mintues ago</span><br>
                    <span class="content">Lorem ipsum et consectetur officia veniam... </span>
                  </li>
                  <li>
                    <img src="img/avatar8.jpg" alt="">
                    <span class="time">25 mintues ago</span><br>
                    <span class="content">Lorem ipsum et consectetur officia veniam... </span>
                  </li>
                </ul>
            </div>
          </form>
        </div>

        <div class="span4">
          <ul id="top-menu">
            <li>
              <a href="javascript:void(0)" class="btn"> 
                <i class="icon-edit"></i>
                <span>Notes</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0)" class="btn">
                <i class="icon-group"></i>
                <span>Groups</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0)" class="btn">
                <i class="icon-eye-open"></i>
                <span>Website</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0)" class="btn">
                <i class="icon-off"></i>
                <span>Logout</span>
              </a>
            </li>
          </ul>
        </div>  

      </div>

      <div id="config-box">
        <a href="javascript:void(0)" class="btn config-button"><i class="icon-cog"></i></a>
        <div class="btn-group">
                  <button class="btn"><i class="icon-refresh"></i> Menu Themes</button>
                  <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" id="menu_colors">
                    <li><a href="#" data-color="pink">PINK</a></li>
                    <li><a href="#" data-color="green">GREEN</a></li>
                    <li><a href="#" data-color="grey">GREY</a></li>
                    <li><a href="#" data-color="white">WHITE</a></li>
                    <li><a href="#" data-color="orange">ORANGE</a></li>
                    <li><a href="#" data-color="blue">BLUE</a></li>
                    <li><a href="#" data-color="gold">GOLD</a></li>
                    <li><a href="#" data-color="black">DEFAULT</a></li>
                  </ul>
              </div>
              <h4>Backgournd:</h4>
              <ul id="backgrounds">
                <li><a href="javascript:void(0)"><img src="img/backgrounds/1.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/2.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/3.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/4.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/5.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/6.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/7.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/8.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/9.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/10.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/11.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/12.jpg" alt=""></a></li>
              </ul>
              <h4>Menu Sub Trigger:</h4>
            <ul id="menu-trigger">
              <li><a href="javascript:void(0)" class="btn" data-trigger="click">Click</a></li>
              <li><a href="javascript:void(0)" class="btn" data-trigger="mouseover">Hover</a></li>
            </ul>
              <h4>Menu Background:</h4>
              <ul id="menu-backgrounds">
                <li><a href="javascript:void(0)"><img src="img/backgrounds/menu1.png" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/menu2.png" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/menu3.png" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="img/backgrounds/menu4.png" alt=""></a></li>
              </ul>
      </div>

    </div>
  </div>
</div>

<div class="container-fluid" id="main_wrapper">
  <div class="row-fluid">

    <div class="span2" id="sidebar">
      <div id="icon-menu">
        <ul>
          <li class="circle">
            <a href="profile.html" title="Profile">
              <img src="img/avatar9.jpg" alt="">   
            </a>
          </li>
          <li class="filter-box">
            <input type="text" id="menuitem-filter" placeholder="e.g. widget">
          </li>
          <li class="menu-controller">
            <a id="btn-menu-controller" href="javascript:void(0)">
              <span><i class="icon-angle-up"></i></span>
            </a>
          </li>
          <li data-keywords="home,dashboard,index,default,entry">
            <a href="index.html" title="Dashboard">
              <i class="icon-home"></i> <span>Home</span>
            </a>
          </li>
          <li data-keywords="widget,window,block,ui">
            <a href="widget.html" title="Widget" id="widget-menu">
              <i class="icon-th-large"></i> <span>Widget</span>
            </a>
          </li>
          <li data-keywords="table,data,rowlink,list,ui">
            <a href="tables.html" title="Tables">
              <i class="icon-th-list"></i> <span>Tables</span>
            </a>
          </li>
          <li data-keywords="chart,pie,bar,line,speakline,dynamic,donut,stacked">
            <a href="charts.html" title="Charts">
              <i class="icon-bar-chart"></i> <span>Charts</span>
            </a>
          </li>
          <li data-keywords="forms,editor,wizard,validate,editable,slider,ui">
            <a href="forms.html" title="Forms">
              <i class="icon-credit-card"></i> <span>Forms</span>
              <span class="label label-success">5</span>
            </a>
            <ul class="sub-menus">
              <li><a href="forms.html" title="Forms"> <span>Elements</span> </a> </li>
              <li><a href="editor.html" title="Editor"> <span>Editor</span> </a> </li>
              <li><a href="wizard.html" title="Wizard"> <span>Wizard</span> </a> </li>
              <li><a href="validator.html" title="Validator"> <span>Validator</span> </a> </li>
              <li><a href="editable.html" title="Editable"> <span>Editable</span> </a> </li>
              <li><a href="javascript:void(0)" title="Sub Link">Sub Link</a></li>
            </ul>
          </li>
          <li class="current" data-keywords="ui,table,interface,gallery,box,block,widget,timeline,grid">
            <a href="ui.html" title="UI">
              <i class="icon-camera"></i> <span>Interfaces</span>
              <span class="label label-success">12</span>
            </a>
            <ul class="sub-menus">
              <li><a href="ui.html" title="UI"> <span>Elements</span> </a> </li>
              <li><a href="attr.html" title="Attr Box"> <span>Attr Box</span> </a></li>
              <li><a href="cal.html" title="Calendar">Calendar</a></li>
              <li><a href="buttons.html" title="Buttons"> <span>Buttons</span> </a> </li>
              <li><a href="grid.html" title="Grid"> <span>Grid</span> </a> </li>
              <li><a href="timeline.html" title="jQuery Timeline"><span>Timeline</span></a></li>
              <li><a href="tabs.html" title="Tab">Tabs</a></li>
              <li><a id="btn-tour" href="javascript:void(0)" title="Tour Guide">Guide Tour</a></li>
              <li><a href="sliders.html" title="Sliders">Sliders</a></li>
              <li><a href="noty.html" title="Notifications">Notifications</a></li>
              <li><a href="accordion.html" title="Accordion">Accordion</a></li>
              <li><a href="faq.html" title="FAQ">FAQ</a></li>
            </ul> 
          </li>
          <li data-keywords="wizard,typo,text,font">
            <a href="typography.html" title="Typography">
              <i class="icon-font"></i> <span>Typography</span>
            </a>
          </li>         
          <li data-keywords="gallery,login,profile,403,404,error,starter">
            <a href="javascript:void(0)" title="Extra">
              <i class="icon-legal"></i> <span>Extra</span>
              <span class="label label-success">6</span>
            </a>
            <ul class="sub-menus">
              <li><a href="gallery.html" title="Gallery"><i class="icon-picture"></i> Gallery</a></li>  
              <li><a href="login.html" title="login"><i class="icon-user"></i> Login</a></li> 
              <li><a href="profile.html" title="profile"><i class="icon-cog"></i> Profile</a></li>  
              <li><a href="404.html" title="404"><i class="icon-eye-close"></i> 404</a></li>  
              <li><a href="tickets.html" title="Tickets"><i class="icon-list"></i> Tickets</a></li>
              <li><a href="starter.html" title="Starter"><i class="icon-question-sign"></i> Starter</a></li>
            </ul>
          </li>
          <li data-keywords="faq,questions">
            <a href="faq.html">
              <i class="icon-question-sign"></i>
              <span>FAQ</span>
            </a>
          </li>
          <li data-keywords="profile,settings,custom,modal,personal">
            <a href="#settings" role="button" data-toggle="modal" data-target="#settings">
              <i class="icon-cog"></i> <span>Settings</span>
            </a>
            <div id="settings" class="modal hide fade" tabindex="-1" role="dialog"> 
              <div class="modal-header"> 
                <button type="button" class="close" data-dismiss="modal">×</button> 
                <h3 id="myModalLabel">Config Box
                </h3> 
              </div> 
              <div class="modal-body"> 
                <form class="form-horizontal" id="basic-form" method="get">

                    <div class="control-group">
                      <label class="control-label">Firstname (required)</label>
                      <div class="controls">
                        <input type="text" name="firstname" id="firstname" placeholder="lisa" required>
                      </div>
                    </div>

                    <div class="control-group">
                      <label class="control-label">lastname (required)</label>
                      <div class="controls">
                        <input type="text" name="lastname" id="lastname" placeholder="joe" required>
                      </div>
                    </div>

                    <div class="control-group">
                      <label class="control-label">email (required)</label>
                      <div class="controls">
                        <input name="email" id="email" type="email" placeholder="lisa@abc.com" required>
                      </div>
                    </div>

                    <div class="control-group">
                      <label class="control-label">Comment (requied)</label>
                      <div class="controls">
                        <textarea name="comment" id="comment" placeholder="balbal blala..." required></textarea>  
                      </div>
                    </div>

                    <div class="form-actions">
                      <button type="submit" class="btn btn-primary" data-dismiss="modal">Save changes</button>
                      <button type="button" class="btn" data-dismiss="modal">Cancel</button>
                    </div>

                  </form>           
              </div> 
            </div>
          </li>
          <li data-keywords="login,signin,profile,entry">
            <a href="login.html">
              <i class="icon-user"></i>
              <span>Login</span>
            </a>
          </li>
        </ul>
      </div>

      <hr>

      <div id="workspace">
        <a id="btn-restore-all" href="javascript:void(0)" class="btn btn-success"><i class="icon-plus"></i> Restore All</a>
      </div>
    </div>
    <div class="span10" id="main"> <!--main section-->
      <div class="row-fluid">
        <div class="breadcrumbs-title">
          Interfaces Elements.
          <div class="pull-right">
            <img src="img/icons/bestseller.png" alt="">
            <span>Balance: $927</span>
          </div>
          <div class="sub">
            Lorem ipsum Esse adipisicing sed fugiat deserunt exercitation ut est aute aliqua amet reprehenderit voluptate irure consequat tempor cupidatat tempor mollit.
          </div>
        </div>
        <ul id="breadcrumbs">
          <li>
            <a href="index.html">
              <span>Home <i class="icon-angle-right"></i></span>
            </a>
          </li>
          <li>
            <a href="index.html">
              <span>Path Here <i class="icon-angle-right"></i></span>
            </a>
          </li>
          <li>
            <a href="index.html">
              <span>Dashboard <i class="icon-map-marker"></i></span>
            </a>
          </li>
        </ul>
      </div>

      <div class="row-fluid">
        <div class="span6">
          <div class="widget">
            <div class="widget-header">
              <i class="icon-legal"></i>
              <h3>Toolbar</h3>
              <a data-widget-action="close"></a>
            </div>
            <div class="widget-content">
              <div class="widget-toolbar">
                <a href="javascript:void(0)" class="btn"><i class="icon-edit"></i></a>
                <a href="javascript:void(0)" class="btn"><i class="icon-save"></i></a>
                <a href="javascript:void(0)" class="btn"><i class="icon-trash"></i></a>
                <span class="divider"></span>
                <a href="javascript:void(0)" class="btn pull-right">
                  Open<i class="icon-plus"></i>
                </a>
                <span class="divider"></span>
                <div class="input-append pull-right">
                    <input class="span6" id="appendedInputButton" type="text">
                    <button class="btn" type="button">Search</button>
                  </div>
              </div>
              <div>
                Lorem ipsum Mollit ut enim est commodo et sed esse aliquip nostrud incididunt id laboris in Excepteur mollit amet irure Excepteur do in ut sed ad culpa voluptate Ut sint anim voluptate dolor deserunt laboris.
              </div>
            </div>
          </div>
        </div>

        <div class="span6">
          <div class="widget">
            <div class="widget-header">
              <i class="icon-legal"></i>
              <h3>Toolbar</h3>
              <a data-widget-action="close"></a>
            </div>
            <div class="widget-content">
              <div class="widget-toolbar">
                <a href="javascript:void(0)" class="btn btn-info">Prev</a>
                <span class="divider"></span>
                <a href="javascript:void(0)" class="btn">1</a>
                <a href="javascript:void(0)" class="btn">2</a>
                <a href="javascript:void(0)" class="btn">3</a>
                <a href="javascript:void(0)" class="btn">4</a>
                <a href="javascript:void(0)" class="btn">5</a>
                <a href="javascript:void(0)" class="btn">6</a>
                <span class="divider"></span>
                <a href="javascript:void(0)" class="btn btn-info">Next</a>
                <a href="javascript:void(0)" class="btn btn-success pull-right">
                  <i class="icon-spinner icon-spin"></i>
                </a>
              </div>
              <div>
                Lorem ipsum In dolor sed exercitation cillum officia laboris est exercitation est eu nisi veniam minim commodo amet tempor Ut exercitation occaecat ut do dolor dolor voluptate commodo labore occaecat ut id.
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row-fluid">
        <div class="widget">
          <div class="widget-header">
            <i class="icon-th-list"></i>
            <h3>Nav List</h3>
            <a data-widget-action="close"></a>
          </div>
          <div class="widget-content">
            <ul class="breadcrumb">
              <li><a href="#">Home</a> <span class="divider">/</span></li>
              <li><a href="#">Library</a> <span class="divider">/</span></li>
              <li><a href="#">WebDocuments</a> <span class="divider">/</span></li>
              <li><a href="#">Working</a> <span class="divider">/</span></li>
              <li><a href="#">Project</a> <span class="divider">/</span></li>
              <li class="active">Data</li>
            </ul>

            <ul class="nav nav-pills">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Library</a></li>
              <li><a href="#">WebDocuments</a></li>
              <li><a href="#">Working</a></li>
              <li><a href="#">Project</a></li>
              <li><a href="#">Data</a></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="row-fluid">
        <div class="span6">
          <div class="widget">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>Dynamic ProgressBar</h3>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content">

              <div class="row-fluid" id="dynamic-progresses">
                <h5>Personal Plan</h5> <strong>Windows PC</strong>
                <span class="pull-right">30%</span>
                <div class="progress progress-danger active">
                  <div class="bar" style="width: 30%;"></div>
                </div> <strong>Mac</strong>
                <span class="pull-right">40%</span>
                <div class="progress progress-info active">
                  <div class="bar" style="width: 40%;"></div>
                </div>
                <strong>iPad/iPhone</strong>
                <span class="pull-right">10%</span>
                <div class="progress progress-striped active">
                  <div class="bar" style="width: 10%;"></div>
                </div>
                <strong>Android</strong>
                <span class="pull-right">5%</span>
                <div class="progress progress-success active">
                  <div class="bar" style="width: 5%;"></div>
                </div>

                <strong>Palm</strong>
                <span class="pull-right">10%</span>
                <div class="progress progress-warning active">
                  <div class="bar" style="width: 10%;"></div>
                </div>

                <strong>Others</strong>
                <span class="pull-right">15%</span>
                <div class="progress progress-info active">
                  <div class="bar" style="width: 5%;"></div>
                </div>

                <p>
                  <a href="#" class="btn btn-large btn-success">Do Something</a>
                </p>
              </div>

            </div>
            <!-- /widget-content --> </div>
        </div>

        <div class="span6">
          <div class="widget">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>Progress Bars</h3>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content">
              <strong>Basic</strong>
              <div class="progress">
                <div class="bar" style="width: 60%;"></div>
              </div>

              <strong>Striped</strong>
              <div class="progress progress-striped">
                <div class="bar" style="width: 20%;"></div>
              </div>

              <strong>Active</strong>
              <div class="progress progress-striped active">
                <div class="bar" style="width: 40%;"></div>
              </div>

              <strong>Stacked</strong>
              <div class="progress">
                <div class="bar bar-success" style="width: 35%;"></div>
                <div class="bar bar-warning" style="width: 20%;"></div>
                <div class="bar bar-danger" style="width: 10%;"></div>
              </div>

              <strong>Colors</strong>
              <div class="progress progress-success">
                <div class="bar" style="width: 40%"></div>
              </div>
              <div class="progress progress-warning">
                <div class="bar" style="width: 60%"></div>
              </div>
              <div class="progress progress-danger">
                <div class="bar" style="width: 80%"></div>
              </div>

              <strong>Colors &amp; Striped</strong>
              <div class="progress progress-success progress-striped">
                <div class="bar" style="width: 40%"></div>
              </div>
              <div class="progress progress-warning progress-striped">
                <div class="bar" style="width: 60%"></div>
              </div>
              <div class="progress progress-danger progress-striped">
                <div class="bar" style="width: 80%"></div>
              </div>

            </div>
            <!-- /widget-content --> </div>

        </div>
      </div>      

      <div class="row-fluid">
        <div class="span6">
          <table class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>Labels</th>
                    <th>Markup</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <span class="label">Default</span>
                    </td>
                    <td>
                      <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="label label-success">Success</span>
                    </td>
                    <td>
                      <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="label label-warning">Warning</span>
                    </td>
                    <td>
                      <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="label label-important">Important</span>
                    </td>
                    <td>
                      <code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="label label-info">Info</span>
                    </td>
                    <td>
                      <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="label label-inverse">Inverse</span>
                    </td>
                    <td>
                      <code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
                    </td>
                  </tr>
                </tbody>
              </table>
        </div>
        <div class="span6">
          <table class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>Badages</th>
                    <th>Markup</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <span class="badge">1</span>
                    </td>
                    <td>
                      <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="badge badge-success">2</span>
                    </td>
                    <td>
                      <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="badge badge-warning">4</span>
                    </td>
                    <td>
                      <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="badge badge-important">6</span>
                    </td>
                    <td>
                      <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="badge badge-info">8</span>
                    </td>
                    <td>
                      <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="badge badge-inverse">10</span>
                    </td>
                    <td>
                      <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
                    </td>
                  </tr>
                </tbody>
              </table>
        </div>
      </div>

      <div class="row-fluid">
        <div class="span6">
          <div class="widget">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>Lightbox</h3>
              <a data-widget-action="thumb"></a>
              <a data-widget-action="full"></a>
              <a data-widget-action="code"></a>
              <a data-widget-action="hide"></a>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content">

              <a data-toggle="lightbox" href="#demoLightbox">Open Lightbox</a>
              <div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog">
                <div class='lightbox-header'>
                  <button type="button" class="close" data-dismiss="lightbox">&times;</button>
                </div>
                <div class='lightbox-content'>
                  <img src="img/800x600.jpg" alt="" />
                </div>
                <div class='lightbox-footer'>
                  <button class="btn btn-small btn-primary">click, footer goes here</button>
                </div>
              </div>

            </div>
            <!-- /widget-content --> </div>  

          <div class="widget">
          <div class="widget-header">
            <i class="icon-th-list"></i>
            <h3>Modal Dialogs</h3>
            <a data-widget-action="close"></a>
          </div>
          <!-- /widget-header -->

          <div class="widget-content">
            <!-- Button to trigger modal -->
            <a href="#myModal" role="button" class="btn" data-toggle="modal">Lanuch demo modal</a>

            <!-- Modal -->
            <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3 id="myModalLabel3">Modal header</h3>
              </div>
              <div class="modal-body">
                <p>One fine body…</p>
              </div>
              <div class="modal-footer">
                <button class="btn" data-dismiss="modal">Close</button>
                <button class="btn btn-primary">Save changes</button>
              </div>
            </div>

            <a href="#rspModal" role="button" class="btn" data-toggle="modal">Responsive modal</a>
            <div id="rspModal" class="modal hide fade" tabindex="-1" data-width="760">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Responsive</h3>
              </div>
              <div class="modal-body">
                <div class="row-fluid">
                  <div class="span6">
                    <h4>Some Input</h4>
                    <p>
                      <input class="span12" type="text"></p>
                    <p>
                      <input class="span12" type="text"></p>
                    <p>
                      <input class="span12" type="text"></p>
                    <p>
                      <input class="span12" type="text"></p>
                    <p>
                      <input class="span12" type="text"></p>
                    <p>
                      <input class="span12" type="text"></p>
                    <p>
                      <input class="span12" type="text"></p>
                  </div>
                  <div class="span6">
                    <h4>Some More Input</h4>
                    <p>
                      <input class="span12" type="text"></p>
                    <p>
                      <input class="span12" type="text"></p>
                    <p>
                      <input class="span12" type="text"></p>
                    <p>
                      <input class="span12" type="text"></p>
                    <p>
                      <input class="span12" type="text"></p>
                    <p>
                      <input class="span12" type="text"></p>
                    <p>
                      <input class="span12" type="text"></p>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>

            <a href="#fwModal" role="button" class="btn" data-toggle="modal">Fullwidth modal</a>
            <div id="fwModal" class="modal container hide fade" tabindex="-1">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Full Width</h3>
              </div>
              <div class="modal-body">
                <p>
                  This modal will resize itself to the same dimensions as the container class.
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin ipsum ac ante fermentum suscipit. In ac augue non purus accumsan lobortis id sed nibh. Nunc egestas hendrerit ipsum, et porttitor augue volutpat non. Aliquam erat volutpat. Vestibulum scelerisque lobortis pulvinar. Aenean hendrerit risus neque, eget tincidunt leo. Vestibulum est tortor, commodo nec cursus nec, vestibulum vel nibh. Morbi elit magna, ornare placerat euismod semper, dignissim vel odio. Phasellus elementum quam eu ipsum euismod pretium.
                </p>
              </div>
              <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>

          </div>
          <!-- /widget-content --> 
        </div>  
        </div>

        <div class="span6">
          <div class="widget">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>Typehead</h3>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content h150">
              <input type="text" data-source="[&quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;,&quot;Arkansas&quot;,&quot;California&quot;,&quot;Colorado&quot;,&quot;Connecticut&quot;,&quot;Delaware&quot;,&quot;Florida&quot;,&quot;Georgia&quot;,&quot;Hawaii&quot;,&quot;Idaho&quot;,&quot;Illinois&quot;,&quot;Indiana&quot;,&quot;Iowa&quot;,&quot;Kansas&quot;,&quot;Kentucky&quot;,&quot;Louisiana&quot;,&quot;Maine&quot;,&quot;Maryland&quot;,&quot;Massachusetts&quot;,&quot;Michigan&quot;,&quot;Minnesota&quot;,&quot;Mississippi&quot;,&quot;Missouri&quot;,&quot;Montana&quot;,&quot;Nebraska&quot;,&quot;Nevada&quot;,&quot;New Hampshire&quot;,&quot;New Jersey&quot;,&quot;New Mexico&quot;,&quot;New York&quot;,&quot;North Dakota&quot;,&quot;North Carolina&quot;,&quot;Ohio&quot;,&quot;Oklahoma&quot;,&quot;Oregon&quot;,&quot;Pennsylvania&quot;,&quot;Rhode Island&quot;,&quot;South Carolina&quot;,&quot;South Dakota&quot;,&quot;Tennessee&quot;,&quot;Texas&quot;,&quot;Utah&quot;,&quot;Vermont&quot;,&quot;Virginia&quot;,&quot;Washington&quot;,&quot;West Virginia&quot;,&quot;Wisconsin&quot;,&quot;Wyoming&quot;]" data-items="4" data-provide="typeahead" style="margin: 0 auto;" class="span3">
              <ul class="typeahead dropdown-menu" style="top: 69px; left: 19px; display: none;">
                <li data-value="South Carolina" class="active">
                  <a href="#">
                    <strong>S</strong>
                    outh Carolina
                  </a>
                </li>
                <li data-value="South Dakota">
                  <a href="#">
                    <strong>S</strong>
                    outh Dakota
                  </a>
                </li>
                <li data-value="Alaska">
                  <a href="#">
                    Ala
                    <strong>s</strong>
                    ka
                  </a>
                </li>
                <li data-value="Arkansas">
                  <a href="#">
                    Arkan
                    <strong>s</strong>
                    a
                    <strong>s</strong>
                  </a>
                </li>
              </ul>
              <h4>Live Demo</h4>
              <p>
                A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.
              </p>
            </div>
            <!-- /widget-content --> </div>
        </div>
      </div>

      <div class="row-fluid">
        <div class="span12">
          <div class="widget">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>Popover</h3>
              <a data-widget-action="thumb"></a>
              <a data-widget-action="full"></a>
              <a data-widget-action="code"></a>
              <a data-widget-action="hide"></a>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content">
              <h4>Popover Demo</h4>
              <a data-content="And here's some amazing content. It's very engaging. right?" title="" data-toggle="popover" class="btn" href="#" data-original-title="A Title">Click to toggle popover</a>

              <br>
              <br>

              <a title="" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="top" data-toggle="popover" class="btn" href="#" data-original-title="Popover on top">Popover on top</a>
              <a title="" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="right" data-toggle="popover" class="btn" href="#" data-original-title="Popover on right">Popover on right</a>
              <a title="" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="bottom" data-toggle="popover" class="btn" href="#" data-original-title="Popover on bottom">Popover on bottom</a>
              <a title="" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="left" data-toggle="popover" class="btn" href="#" data-original-title="Popover on left">Popover on left</a>
            </div>
            <!-- /widget-content --> </div>
        </div>
      </div>

      <div class="row-fluid">
        <div class="span6">
          <div class="widget">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>Color Picker</h3>
              <a data-widget-action="thumb"></a>
              <a data-widget-action="full"></a>
              <a data-widget-action="code"></a>
              <a data-widget-action="hide"></a>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content">
              <h4>Attached to a field with hex format specified via options.</h4>
              <input type="text" id="cp1" class="span1 colorpicker" value="#8fff00">

              <h4>Attachet to a field with the rgba format specified via data tag.</h4>
              <input type="text" data-color-format="rgba" id="cp2" value="rgb(0,194,255,0.78)" class="colorpicker">
              
              <h4>As component.</h4>
              <div id="cp3" class="input-append color" data-color="rgb(255, 146, 180)" data-color-format="rgb">
                <input type="text" class="span12" value="" >
                <span class="add-on"><i style="background-color: rgb(255, 146, 180)"></i></span>
              </div>

              <h4>Changed Callback</h4>
              <a data-color="rgb(255, 255, 255)" data-color-format="hex" id="cp4" class="btn small" href="#">Change background color</a>
              <h4>Callback Code</h4>
              <div>
                <pre class="prettyprint lang-js linenums">
$('#cp4').colorpicker().on('changeColor', function(ev) 
{
  $('#cp4').css('background-color', ev.color.toHex());
});
                </pre>
              </div>
            </div>  
          </div>
        </div>
      
        <div class="span6">
          <div class="widget">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>Date &amp; Time Picker</h3>
              <a data-widget-action="thumb"></a>
              <a data-widget-action="full"></a>
              <a data-widget-action="code"></a>
              <a data-widget-action="hide"></a>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content">
              <h4>Attached to a field with the format specified via options.</h4>
              <input type="text" id="dp1" value="02-16-2012" class="datepicker">
              
              <h4>Attachet to a field with the format specified via data tag.</h4>
              <input type="text" id="dp2" data-date-format="mm/dd/yy" value="02/16/12" class="datepicker">
              
              <h4>As component.</h4>
              <div data-date-format="dd-mm-yyyy" data-date="12-02-2012" id="dp3" class="input-append date">
                <input type="text" readonly="" value="12-02-2012" size="16" class="span12">
                <span class="add-on"><i class="icon-calendar"></i></span>
              </div>

              <h4>Reservation dates:</h4>
              <div class="input-prepend">
                <span class="add-on">
                  <i class="icon-calendar"></i>
                </span>
                <input type="text" name="reservation" id="reservation" />
              </div>

              <div>
                <h4>Clockface</h4>
                <input id="t1" value="2:30 PM" data-format="hh:mm A" class="input-small" type="text">

                <div class="input-append">
                  <input id="t2" value="14:30" class="input-small" readonly="" type="text">
                  <button class="btn" type="button" id="toggle-btn">
                    <i class="icon-time"></i>
                  </button>
                </div>

                <div>
                  <div id="t3" class="well"></div>
                </div>

              </div>

            </div>
            <!-- /widget-content --> </div>
        </div>
      </div>

      <div class="row-fluid">
        <div class="span6">
          <div class="widget">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>Pagination</h3>
              <a data-widget-action="thumb"></a>
              <a data-widget-action="full"></a>
              <a data-widget-action="code"></a>
              <a data-widget-action="hide"></a>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content">
              <div class="pagination">
                <h4>Default</h4>
                <ul>
                  <li>
                    <a href="#">Prev</a>
                  </li>
                  <li>
                    <a href="#">1</a>
                  </li>
                  <li>
                    <a href="#">2</a>
                  </li>
                  <li>
                    <a href="#">3</a>
                  </li>
                  <li>
                    <a href="#">4</a>
                  </li>
                  <li>
                    <a href="#">5</a>
                  </li>
                  <li>
                    <a href="#">Next</a>
                  </li>
                </ul>
              </div>
                
              <div class="pagination">
                <h4>Disabled</h4>
                <ul>
                  <li class="disabled">
                    <a href="#">&laquo;</a>
                  </li>
                  <li class="active">
                    <a href="#">1</a>
                  </li>
                  <li>
                    <a href="#">2</a>
                  </li>
                  <li>
                    <a href="#">3</a>
                  </li>
                  <li>
                    <a href="#">4</a>
                  </li>
                  <li>
                    <a href="#">5</a>
                  </li>
                  <li>
                    <a href="#">&raquo;</a>
                  </li>
                </ul>
              </div>

              <div class="pagination pagination-large">
                <h4>Large</h4>
                <ul>
                  <li>
                    <a href="#">&laquo;</a>
                  </li>
                  <li>
                    <a href="#">1</a>
                  </li>
                  <li>
                    <a href="#">2</a>
                  </li>
                  <li>
                    <a href="#">3</a>
                  </li>
                  <li>
                    <a href="#">&raquo;</a>
                  </li>
                </ul>
              </div>
              <div class="pagination">
                <h4>Medium</h4>
                <ul>
                  <li>
                    <a href="#">&laquo;</a>
                  </li>
                  <li>
                    <a href="#">1</a>
                  </li>
                  <li>
                    <a href="#">2</a>
                  </li>
                  <li>
                    <a href="#">3</a>
                  </li>
                  <li>
                    <a href="#">4</a>
                  </li>
                  <li>
                    <a href="#">5</a>
                  </li>
                  <li>
                    <a href="#">&raquo;</a>
                  </li>
                </ul>
              </div>
              <div class="pagination pagination-small">
                <h4>Small</h4>
                <ul>
                  <li>
                    <a href="#">&laquo;</a>
                  </li>
                  <li>
                    <a href="#">1</a>
                  </li>
                  <li>
                    <a href="#">2</a>
                  </li>
                  <li>
                    <a href="#">3</a>
                  </li>
                  <li>
                    <a href="#">4</a>
                  </li>
                  <li>
                    <a href="#">5</a>
                  </li>
                  <li>
                    <a href="#">&raquo;</a>
                  </li>
                </ul>
              </div>
              <div class="pagination pagination-mini">
                <h4>Mini</h4>
                <ul>
                  <li>
                    <a href="#">&laquo;</a>
                  </li>
                  <li>
                    <a href="#">1</a>
                  </li>
                  <li>
                    <a href="#">2</a>
                  </li>
                  <li>
                    <a href="#">3</a>
                  </li>
                  <li>
                    <a href="#">4</a>
                  </li>
                  <li>
                    <a href="#">5</a>
                  </li>
                  <li>
                    <a href="#">&raquo;</a>
                  </li>
                </ul>
              </div>

              <div class="pagination">
                <h4>With Icons</h4>
                <ul>
                  <li>
                    <a href="#"><i class="icon-arrow-left"></i></a>
                  </li>
                  <li>
                    <a href="#">1</a>
                  </li>
                  <li>
                    <a href="#">2</a>
                  </li>
                  <li>
                    <a href="#">3</a>
                  </li>
                  <li>
                    <a href="#">4</a>
                  </li>
                  <li>
                    <a href="#">5</a>
                  </li>
                  <li>
                    <a href="#"><i class="icon-arrow-right"></i></a>
                  </li>
                </ul>
              </div>

            </div>
            <!-- /widget-content --> </div>
        </div>

        <div class="span6">
          <div class="widget">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>Widget with Accordion</h3>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content">
              <div class="accordion widget-accordion" id="accordion2">
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                      <i class="icon-pencil"></i>
                      Collapsible Group Item #1
                    </a>
                  </div>
                  <div style="height: 0px;" id="collapseOne" class="accordion-body collapse">
                    <div class="accordion-inner">
                      Lorem ipsum nostrud Duis et officia elit do non proident velit cupidatat dolor enim deserunt ut ut culpa Excepteur esse est dolore ut enim voluptate quis non ex.
                    </div>
                  </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                      <i class="icon-pencil"></i>
                      Collapsible Group Item #2
                    </a>
                  </div>
                  <div style="height: 0px;" id="collapseTwo" class="accordion-body collapse">
                    <div class="accordion-inner">
                      Lorem ipsum esse pariatur in amet dolor officia ut exercitation in dolore exercitation dolor esse Ut laboris aute sint incididunt laborum labore Duis cillum ea mollit ut ex incididunt in veniam culpa labore occaecat deserunt tempor in fugiat ullamco deserunt voluptate consectetur minim anim amet ad.
                    </div>
                  </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                      <i class="icon-pencil"></i>
                      Collapsible Group Item #3
                    </a>
                  </div>
                  <div style="height: auto;" id="collapseThree" class="accordion-body in collapse">
                    <div class="accordion-inner">
                      Lorem ipsum culpa in nisi sint ad amet officia in amet voluptate reprehenderit dolore dolor laborum laborum Excepteur eiusmod consectetur ut deserunt laboris cillum Excepteur ex anim non sed cillum adipisicing tempor exercitation occaecat Ut fugiat sint non.
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="widget">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>QRCode</h3>
              <a data-widget-action="close"></a>
            </div>
            <div class="widget-content">
              <div id="qrcode"></div>
            </div>
          </div>

        </div>
      </div>

      <div class="row-fluid">
        <div class="span12">
          <div class="widget">
            <div class="widget-header">
              <i class="icon-th-list"></i>
              <h3>
                Cloud Words
                <sup>hot</sup>
              </h3>
              <a data-widget-action="thumb"></a>
              <a data-widget-action="hide"></a>
              <a data-widget-action="close"></a>
            </div>
            <!-- /widget-header -->

            <div class="widget-content">
              <div id="chat_words" class="words-cloud"></div>
            </div>
            <!-- /widget-content -->
          </div>
        </div>
      </div>
      <!--/Cloud Words-->

    </div>
  </div>
</div>

<div id="back-top">
  <a href="javascript:void(0)"><i class="icon-angle-up"></i></a>
</div>

<div class="copyright">
  <p>Copyright &copy; Your Company 2013. All rights reserved.</p>
</div>

<ol id="tour">
  <li data-class="filter-box" data-text="Next Please">
    <h5>Welcome to gappro!</h5>
    <p>Follow me please, type 'widget' to filter menu.</p>
  </li>

  <li data-class="filter-box" data-text="Next Please">
    <h5>Did you see?</h5>
    <p>Focus input box, then press 'ESC' key please.</p>
  </li> 

  <li data-class="menu-controller" data-text="Next Please">
    <h5>Hide menu items.</h5>
    <p>Click now, you can working with workspace.</p>
  </li> 

  <li data-class="menu-controller" data-text="Next Please">
    <h5>Redo it.</h5>
    <p>Click again to show menu.</p>
  </li> 

  <li data-id="widget-menu" data-text="Next Please">
    <h5>Move mouse to widget icon.</h5>
    <p>Drag widget-icon to top bar, then drop it.</p>
  </li>

  <li data-id="messages-box" data-text="Finish Tour" data-options="tipLocation:right">
    <h5>You have created a persistent fav-link.</h5>
    <p>Jump to another page to test it, or drag again to remove it.</p>
  </li>
</ol>

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/modernizr.mq.js"></script>
<script src="js-webshim/extras/modernizr-custom.js"></script>
<script src="js-webshim/polyfiller.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui-1.10.2.min.js"></script>
<script src="js/date.js"></script>
<script src="js/bootstrap_modal/bootstrap-modalmanager.js"></script>
<script src="js/bootstrap_modal/bootstrap-modal.js"></script>
<script src="js/colorpicker/bootstrap-colorpicker.js"></script>
<script src="js/datepicker/bootstrap-datepicker.js"></script>
<script src="js/clockface/clockface.js"></script>
<script src="js/daterangepicker/daterangepicker.js"></script>
<script src="js/lightbox/bootstrap-lightbox.min.js"></script>
<script src="js/qrcode/qrcode.js"></script>
<script src="js/qrcode/jquery.qrcode.js"></script>
<script src="js/application.js"></script>
<script src="js/prettify/prettify.js"></script>
<script src="js/format/html-format.js"></script>
<script src="js/cookie/jquery.cookie.js"></script>
<script src="js/jqcloud/jqcloud-1.0.2.min.js"></script>
<script src="js/bootstrap_growl/jquery.bootstrap-growl.min.js"></script>
<script src="js/joyride/jquery.joyride-2.0.3.js"></script>
<script src="js/jstorage/json2.js"></script>
<script src="js/jstorage/jstorage.min.js"></script>
<script src="js/gappro/config.js"></script>
<script src="js/gappro/gappro.js"></script>
<script src="js/application.js"></script>
<script src="js/ui.js"></script>
<script src="js/fix/ios-orientationchange-fix.js"></script>
</body>
</html>